25 - Design mit System — ein Überlebenshandbuch für und mit Pattern Libraries [ID:9496]
50 von 558 angezeigt

Der Titel ist ganz schön reißerisch, also wie das halt so ist, wenn man so ein Proposal

abgeben muss, ob es ein wirkliches Überlebenshandbuch ist, weiß ich nicht. Schön, dass ihr alle

noch durchgehalten habt. Zweiter Tag, vorletzter Vortrag. Ich kann mir vorstellen, dass da

so ein bisschen die Luft raus ist bei euch. Ich habe gerade zu Marc gesagt, sein Vortrag

war ja eher entspannt und chillig. Es tut mir leid, ich muss das beenden. Ich habe eine

totale Druckbetankung. Ich habe beim Testdurchlauf heute Morgen nach 45 Minuten war ich bei der

Hälfte und ich muss mich echt anstrengen. Ich werde die 45 Minuten brauchen. Ich versuche

so schnell wie möglich da durchzukommen, sodass trotzdem bei euch was ankommt. Ganz

kurz noch zwei, drei Worte zu mir. Danke für die Vorstellung. Das war fast vollständig.

Ich wollte noch ein bisschen was zu meinem Hintergrund sagen, damit ihr auch einordnen

könnt, warum ich mich für alles interessiere. Ich mache quasi Computersachen, seit ich

ein kleiner Junge war, Websites seit 1995 und habe aber eigentlich eine Ausbildung als

Innenarchitekt. Das heißt, ich komme so ein bisschen aus der Architektur- und Designecke

auch, habe eben seit 2000 Agenturen, wo wir uns hauptsächlich mit Websites, über drei

Websites, viel barrierefrei, dann so was beschäftigen und ich habe ein Faible für Systematik. Das

glaube ich braucht man auch so ein bisschen in dem Ding. Ich möchte über Designsysteme

im Allgemeinen, Pattern Libraries und die Hintergründe dazu ein bisschen sprechen und

dann in einem zweiten Teil, wie gerade schon angedeutet, anhand von der neuen Website,

der Nürnberg Web Week zeigen, wie wir das Ganze in der Praxis bei uns einsetzen. Nicht

nur bei dem Projekt, sondern auch im Allgemeinen verwenden. Ein kleines Detail noch, die, die

mich ein bisschen verfolgen, haben es vielleicht mitgekriegt. Der Vortrag ist in einer etwas

ungewöhnlichen Situation entstanden, nämlich ziemlich genau jetzt vor einer Woche war ich

80 Kilometer vom EPI-Zentrum beim Erdbeben in Japan weg und wollte eigentlich da mir

viel Zeit nehmen diesen Vortrag vorzubereiten. So hat mein Arbeitsplatz ausgesehen, also

außer Wohnmobil hat mir nicht viel zur Verfügung gestanden. Ich hoffe trotzdem, dass was Anständiges

dabei rausgekommen ist. Designsysteme. Ich würde erstmal eine Frage stellen, wer von

euch hat eine Vorstellung, was ein Designsystem ist, was eine Pattern Library ist, was das

denn sein könnte? Okay, also so gut die Hälfte. Wie viele von euch arbeiten denn tatsächlich

aktiv mit einem Designsystem in Projekten oder hatten damit schon mal zu tun? Okay,

dann glaube ich sind ein paar Leute da, denen ich hoffentlich ein paar Anregungen mit auf

den Weg geben kann. Als erstes möchte ich so ein bisschen erzählen, wo kommt das eigentlich

alles her? Ich möchte euch da irgendwie aufgabeln. Designsysteme oder die Vorläufer davon kennt

man eigentlich schon ziemlich lang, vor allem aus dem Printbereich. Es gibt diesen Begriff

Style Guide oder Brand Manual schon eine ganze Weile und was macht man in so einem Style

Guide üblicherweise? Man dokumentiert da eine Marke oder ein Corporate Design und legt

Gestaltungsmerkmale nieder, die man dann später rauslesen und anhand davon Produkte ableiten

kann. Da gehören typischerweise so Sachen rein wie Schriften, wie geht man mit Text

im Allgemeinen um, wie geht man mit Bildern um. Aber es geht auch in Produktionsverfahren

hinein, also zum Beispiel welches Papier wird verwendet, um irgendwas zu drucken oder welche

Druckfarben werden dafür verwendet und Veredelungen und so weiter. Die Zielsetzungen von so einem

Style Guide aus dem Printbereich sind üblicherweise eben, dass man einen Corporate Design tatsächlich

dokumentiert und kommunizieren kann. Das ist ein gutes Hilfsmittel um eine Corporate Identity

aufzubauen, das heißt, dass man sich mit einer Marke identifizieren kann und vor allem eben

eine Hilfestellung, um dann anschließend Medien draus abzuleiten. Das heißt, wenn

man irgendwas produzieren muss, hat man eine gute Grundlage um darauf aufzubauen. Das ist

vor allem dann wichtig, wenn man sich vorstellt, dass oftmals im späteren Leben von so einem

Corporate Design der eine oder andere Umsitzer nicht der wahnsinnig begnadete Designer ist,

der auch mit der Marke von Anfang an befasst war. Das heißt, es wird so ein bisschen das

Virtuositäts-Erfordernis rausgenommen aus sowas. Es gibt schon diesen Begriff des Style

Guides schon ziemlich lange, ein sehr populäres Beispiel, schon aus den 70er Jahren war beispielsweise

Teil einer Videoserie :

Presenters

Joschi Kuphal Joschi Kuphal

Zugänglich über

Offener Zugang

Dauer

00:45:20 Min

Aufnahmedatum

2018-09-13

Hochgeladen am

2018-09-13 16:45:08

Sprache

de-DE

Folien finden Sie hier: https://jkphl.is/slides/wke2018

 

Immer komplexere Projektanforderungen, die fortschreitende Fragmentierung von Webtechnologien und die damit notwendige Verteilung auf immer spezialisiertere Teams fördern laufend neue Herausforderungen zu Tage. Die effektive Verzahnung von Spezialdisziplinen und die laufende Abstimmung zwischen allen Beteiligten stellt in vielen Projekten einen signifikanten Aufwandsposten dar — ganz jenseits der eigentlichen Design- und Entwicklungsarbeit. Als eine sinnvolle Herangehensweise bei entsprechend umfangreichen Projekte hat sich das »Component-Driven Development« hervorgetan: Statt des überkommenen Ansatzes, in kompletten »Seiten« zu denken und umzusetzen, lassen sich Anwendungen und ihre Oberflächen in design- und funktionsbezogene Module zergliedern, die Stück für Stück und aufeinander aufbauend isoliert konzipiert, entworfen, umgesetzt und getestet werden können.

Zur Unterstützung komponentengetriebener Herangehensweisen sind in den letzten Jahren etliche Werkzeuge auf der Bildfläche erschienen. Die Spanne reicht von vergleichsweise einfachen (CSS-)Dokumentationswerkzeugen wie KSS  bis zu leistungsfähigen Styleguide-Generatoren wie Brad Frost’s Pattern Lab . Je nach zugrunde liegender Methodologie verfolgen diese Werkzeuge unterschiedlichste Ansätze hinsichtlich

  • Art und Umfang der dokumentierten Module
  • Organisation und Navigation von Komponenten
  • Dokumentationsform
  • Darstellung von Varianten
  • Darstellung von Zusammenhängen zwischen Komponenten
  • inhaltlicher Dynamik und dem Ergänzen neuer Komponenten
  • u.s.w.

So unterschiedlich wie die Landschaft der Methodologien und Werkzeuge sind auch die Auffassungen, welche Informationen Eingang in ein solches System finden sollen, und so vielfältig sind auch die gebräuchlichen, teils synonym verwendeten Bezeichnungen wie »Design System«, »Pattern Library«, »Living Styleguide« oder »Komponentenbibliothek«. Richtig umgesetzt fördern sie den Austausch aller Projektbeteiligten (Auftraggeber, Design-Team, Entwickler-Team, etc.), unterstützen kontinuierliches Testing (visuell, funktional, Barrierefreiheit, etc.) und erleichtern das Onboarding später hinzustoßender Team-Mitglieder.

Eine besondere Herausforderung stellt in vielen Fällen das langfristige Synchronhalten von Pattern Library und realem Projektcode dar — ein Grund, warum viele Systeme nicht auf Dauer überleben (gerade wenn Projekte in die heiße Phase übergehen). Anhand eines aktuellen Projekts — der bis zum Vortrag gerelaunchten Präsenz der Nürnberg Web Week — demonstriert Joschi Kuphal, wie die Live-Integration einer Fractal-basierten Library mit einer TYPO3-Website gelingen kann.

Tags

Webdesign WKE WKE2018 Webentw A11Y webkongress cms pattern aktuelle webtechnologie schnelle accessibility fractal moderne format patterns betreuung aktion slides design relaunch anforderungen
Einbetten
Wordpress FAU Plugin
iFrame
Teilen